<template>
  <div>
    <van-grid  :column-num="2">
    <van-grid-item icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E4%B8%BA%E4%BD%A0%E6%8E%A8%E8%8D%90.png" text="喜欢推荐" @click="RecBylastplaylist()" />
    <van-grid-item icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E9%9F%B3%E4%B9%90%E6%8E%A8%E8%8D%90.png" text="有缘推荐" @click="RecBylastfollowUser()"  />
    <van-grid-item icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E5%B7%B2%E6%83%B3%E7%9C%8B.png" text="关注推荐" @click="RecByFollowList()" />
    <!-- <van-grid-item icon="photo-o" text="根据最近关注的共同好友推荐" @click="RecByCommonFollow()"/> -->
    <van-grid-item icon="http://rul4y8e5f.hn-bkt.clouddn.com/%E7%83%AD%E9%97%A8.png" text="热门音乐" @click="getHostMusicList()"/>
  </van-grid>

  <div>
    <!-- <p>{{type}}</p> -->
    <van-list
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        >
        <page2musicList
        v-for="item in list"
        :key="item.musicId"
        :Id="item.musicId"
        :UserId="item.musicUploaderId"
        :MusicId="item.musicId"
        :MusicName="item.musicName"
        :MusicAuthor="item.musicAuthor"
        :MusicIcon="item.musicIcon"
        :MusicUrl="item.musicUrl"
        :MusicDescription="item.musicDescription"
        >
        </page2musicList>
     </van-list>
  </div>
  </div>
</template>

<script>
import MusicAPI from '@/api/MusicAPI'
import page2musicList from '../home/page2musicList.vue'
import RecommendAPI from '@/api/RecommendAPI'
export default {
  components: { page2musicList },
 name: 'MusicRecPage',
 data() {
  return {
    list:[],
    type:"最近热播列表",
  }
 },


 created() {
  // 首次获取页面结果
  this.getHostMusicList()

  },
  

 methods:{
  
  getHostMusicList(){    
        var result = MusicAPI.GetHotMusic()
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.list=val.data
          this.type= "最近热播列表";  
          // console.log(this.data);
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    },

    RecBylastplaylist(){
      var result = RecommendAPI.LastPlayListRce()
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.list=val.data
          this.type= "根据用户最近加入播放列表的音乐进行推荐(ItemCF)";  
          console.log(this.data);
        }else{
          this.$toast(val.errorMsg)
        }
            })
    },


    RecBylastfollowUser(){
      var result = RecommendAPI.LastFollowRce()
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.list=val.data
          this.type= "根据用户最近关注好友推荐(UserCF)";  
          console.log(this.data);
        }else{

          this.$toast(val.errorMsg)
        }
            })
    },

    RecByFollowList(){
      var result = RecommendAPI.FollowPlayListRec()
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.list=val.data
          this.type= "根据当前关注的用户播放队列进行推荐";  
          console.log(this.data);
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    },

    // 未实现
    RecByCommonFollow(){
      var result = RecommendAPI.CommonFollowPlayListRec()
      // 获取响应结果 
      result.then((val)=>{
        if(val.success){
          this.list=val.data
          this.type= "共同关注的用户播放队列进行推荐";  
          console.log(this.data);
        }else{
          console.log(val.errorMsg)
          this.$toast(val.errorMsg)
        }
            })
    },


 },

}
</script>

<style>

</style>